<template>
  <div class="layer-setting">
    <div class="item-setting" v-for="(item,index) in optionsInfo" :key="index">
      <div class="header-info">
        <el-divider content-position="left">
          {{ (index === 'current') ? '就诊弹层设置' : '候诊弹层设置' }}
        </el-divider>
      </div>
      <div class="editor-item">
        <el-form-item label="标题">
          <el-input v-model="item['content']" placeholder="请输入内容" size="small"/>
        </el-form-item>
        <el-form-item label="显示">
          <el-switch v-model="item['display']"/>
        </el-form-item>
        <el-form-item label="字号">
          <el-input-number
              :min="14"
              size="small"
              class="hide-spin-button"
              v-model="item['fontSize']"
          />
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="item['color']"/>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="item['backgroundColor']"/>
        </el-form-item>
        <el-form-item label="患者号字体颜色" class="column-area">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="item['patientNumberBackground']"/>
        </el-form-item>
        <el-form-item label="患者号背景颜色" class="column-area">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="item['patientNumberColor']"
          />
        </el-form-item>
      </div>
    </div>
  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "layerInfo-editor",

  componentName: "layerInfo-editor",

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  data() {
    return {
      optionsInfo:Object(),
      constantDic: constantDic,
      predefineColors: types['predefineColors'],
    }
  },

  watch: {
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val['layerInfo'];
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.layer-setting{
  .el-divider__text{
    font-weight: 600;
  }
  .column-area{
    display: flex;
    flex-direction: column;
    :deep(.el-form-item__label){
      width: 100% !important;
      margin-bottom: 10px;
    }
    :deep(.el-form-item__content){
      width: 100%;
      margin-left: 0 !important;
      .el-radio-group{
        width: 100%;
        display: flex;
        flex-direction: column;
        .el-radio{
          margin-bottom: 10px;
        }
      }
    }

  }
}
</style>
